<template>
	<!-- 20221201 -->
	<view class="mall-my-collect-page">
		<!-- 页面内容 -->
		<view class="page-content padding-bottom-safe-footer-20">

			<!-- 顶部栏 搜索 -->
			<view class="jc-header bg-ff" v-if="isLoadMyCollectFinish && myCollectList.length">
				<view class="line-height-header padding-lr-30 flex align-center">
					<!-- 搜索 -->
					<view class="flex-one">
						<ty-bar-search :value.sync="keyword" @search="search"></ty-bar-search>
					</view>

					<view class="margin-left-30 text-30" @click="isEdit = !isEdit">
						{{isEdit ? '完成' : '管理'}}
					</view>
				</view>
			</view>

			<!-- 我的收藏列表 -->
			<view class="margin-top-title-header-20" v-if="isLoadMyCollectFinish && myCollectList.length">

				<view class="margin-lr-30 margin-tb-20 padding-20 radius-10 bg-ff flex align-center"
					v-for="(item,index) in myCollectList" :key="index">
					<!-- 选中图标 -->
					<view class="choose-btn margin-right-10 text-center" @click.stop="choose(index)" v-if="isEdit">
						<text class="text-40"
							:class="item.is_select == 0 ? 'tyIcon-round text-cc' : 'tyIcon-round-check text-main'">
						</text>
					</view>

					<!-- 产品 -->
					<view class="flex-one flex align-center"
						@click="go('/pages/mall/detail?id=' + item.product_id)">

						<!-- 图片 -->
						<image class="jc-image-180 radius-10" :src="item.product_cover_img" mode="aspectFill">
						</image>

						<!-- 信息 -->
						<view class="margin-left-20 flex-one">
							<!-- 名称 -->
							<view class="line-height-40 text-28 text-cut-one">
								{{item.product_name}}
							</view>

							<!-- 失效图标 -->
							<view class="margin-top-20 height-30">
								<view class="inline-block">
									<ty-text-label text="失效" bg-color="#ccc" :radius="15" v-if="item.is_effective == 0"></ty-text-label>
								</view>
							</view>

							<view class="margin-top-50 text-30 text-main">
								¥{{item.product_price}}
							</view>
						</view>
					</view>

				</view>
			</view>

			<!-- 空 -->
			<view v-if="isLoadMyCollectFinish && !myCollectList.length">
				<ty-text-no-data text="您还没有收藏过商品哦" @btnClick="go('/pages/mall/index',3)">
				</ty-text-no-data>
			</view>


			<!-- 推荐商品列表 -->
			<view class="">
				<view class="margin-top-20 line-height-40 flex align-center justify-center">
					<view class="border-line"></view>
					<text class="margin-lr-30 text-28 text-4d">好物推荐</text>
					<view class="border-line"></view>
				</view>

				<jc-mall-productList :list="list" :loadStatus="loadStatus" :type="2" :is-label-show="true">
				</jc-mall-productList>
			</view>

			<!-- 底部条 -->
			<view class="jc-footer-safe bg-ff">
				<view class="line-height-footer padding-lr-30 flex align-center justify-between" v-if="isEdit">

					<view class="flex align-center">
						<!-- 全选图标 -->
						<text class="text-40"
							:class="isAllChoose ? 'tyIcon-round-check text-main' : 'tyIcon-round text-cc'"
							@click="chooseAll"></text>
						<view class="margin-left-5 line-40 text-28">全选</view>
					</view>
					
					<view class="width-220 line-height-75 bg-main text-center text-30 text-ff"
						style="border-radius: 38rpx;" @click="collectCancel">
						取消收藏
					</view>
				</view>
			</view>

			<!-- 返回顶部 -->
			<view class="btn-block">
				<ty-text-top-home :scroll-top="scrollTop" :is-show-home="false"></ty-text-top-home>
			</view>
		</view>

		<!-- 页面浮层 -->
		<view class="page-layer">

		</view>
	</view>
</template>

<script>
	import mall from '../api/mall.js'
	export default {
		data() {
			return {
				// 下拉刷新状态 true--正在下拉 false--没有在下拉
				isPullDownIng: false,

				// 距离页面顶部距离
				scrollTop: 0,

				// 是否编辑模式
				isEdit: false,
				// 是否全选
				isAllChoose: false,
				// 关键字
				keyword: '',
				// 是否加载完成
				isLoadMyCollectFinish: false,
				// 我的收藏列表
				myCollectList: [],

				// 列表状态
				loadStatus: '',
				// 推荐产品列表
				list: []
			}
		},

		onReady() {
			// 加载我的收藏商品
			this.loadMyCollectList()

			// 加载推荐商品
			this.loadList(1)
		},

		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},

		onReachBottom() {
			this.loadList(0)
		},

		onPullDownRefresh() {
			// 下拉刷新状态为进行中
			this.isPullDownIng = true

			// 加载我的收藏商品
			this.loadMyCollectList()
		},

		methods: {
			/**
			 * 获取推荐商品
			 * @param {int} isFirstPage 是否第一页 0--不是 1--是
			 * @date 2022-10-27
			 */
			loadList(isFirstPage) {
				mall.listProduct(this, isFirstPage, '', '', '', 1, '', '', 5)
			},

			/**
			 * 回车搜索
			 * @param {Object} e
			 * @date 2022-12-01
			 */
			search(e) {
				this.loadMyCollectList()
			},

			/**
			 * 加载我的收藏商品
			 * @date 2022-12-01
			 */
			loadMyCollectList() {
				mall.listMyCollect(this.keyword).then(res => {
					if (res.code == 0) {
						this.myCollectList = res.data.my_collect_list
						this.isLoadMyCollectFinish = true
						// 正在下拉状态时，停止下拉刷新
						if (this.isPullDownIng) {
							uni.stopPullDownRefresh()
						}
					}
				})
			},

			/**
			 * 选择商品
			 * @param {int} index 
			 * @date 2022-12-01
			 */
			choose(index) {
				this.myCollectList[index].is_select = this.myCollectList[index].is_select == 1 ? 0 : 1

				this.loadBottom()
			},

			/**
			 * 全选商品
			 * @date 2022-12-01
			 */
			chooseAll() {
				this.isAllChoose = !this.isAllChoose

				let isAllChoose = this.isAllChoose ? 1 : 0
				this.myCollectList.forEach(value => {
					value.is_select = isAllChoose
				})
			},

			/** 
			 * 重新加载底部栏
			 * @date 2022-12-01
			 */
			loadBottom() {
				let isAllChoose = true
				this.myCollectList.forEach(value => {
					if (value.is_select == 0) {
						isAllChoose = false
					}
				})
				this.isAllChoose = isAllChoose
			},

			/**
			 * 取消收藏
			 * @date 2022-12-01
			 */
			collectCancel() {
				let collectIds = []
				for (let i = 0; i < this.myCollectList.length; i++) {
					if (this.myCollectList[i].is_select == 1) {
						collectIds.push(this.myCollectList[i].id)
					}
				}

				if (collectIds.length == 0) {
					this.cn.toast('请选择需要取消收藏的商品~')
					return false
				}

				mall.deleteMyCollect(collectIds).then(res => {
					if (res.code == 0) {
						this.cn.toast(res.msg)
						this.isEdit = false
						this.loadMyCollectList()
					}
				})
			}
		}
	}
</script>

<style scoped>
	/* 选择按钮 */
	.choose-btn {
		width: 40rpx;
	}

	/* 好物推荐 */
	.border-line {
		width: 80rpx;
		height: 1rpx;
		background: #ccc;
	}

	/* 返回顶部和返回首页 */
	.btn-block {
		position: fixed;
		z-index: 900;
		right: 30rpx;
		bottom: calc(var(--window-bottom) + var(--footerHeight) + 50rpx + env(safe-area-inset-bottom));
	}
</style>